<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>
<html>
<head>
    <title>角色管理</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/iview/3.4.0/dist/styles/iview.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css">
    <script src="webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="webjars/iview/3.4.0/dist/iview.js"> </script>
    <script src="webjars/axios/0.18.0/dist/axios.js"></script>
    <script>
        var ctx="<%=request.getContextPath()%>";
    </script>
</head>
<body>
<div id="root">
    <modal title="角色授权" v-model="grantFlag" @on-ok="doGrant()">
        <tree ref="tree" :data="treeData" style="margin-left:50px" show-checkbox multiple></tree>
    </modal>
    <card>
        <i-button type="success" icon="md-finger-print" @click="grant()">角色授权</i-button>
    </card>
    <i-table :height="height" :data="data" :columns="columns" border stripe @on-selection-change="changeSelection"></i-table>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#root',
        data:{
            grantFlag:false,
            selection:[],
            height: 250,
            data:[],
            columns:[
                {type:"selection",width:60},
                {title:"编号",key:"id"},
                {title:"英文标识",key:"roleCode"},
                {title:"中文名称",key:"roleName"},
                {title:"创建时间",key:"creationDate"}
            ],
            treeData:[]
        },
        methods:{
            search(){
                axios.get(`${ctx}/jsp/rolelist`)
                    .then(({data})=>{
                            this.data = data.result;
                    });
            },
            grant(){
                if(this.selection.length!=1){
                    iview.Message.warning("请选择且只能选择一项待授权！");
                    return;
                }
                axios.get(`${ctx}/jsp/permissions/${this.selection[0].id}`)
                    .then(({data})=>{
                        this.treeData = data.result;
                        this.grantFlag = true;
                    });
            },
            doGrant(){
                let params=`roleid=${this.selection[0].id}`;
                var tree=this.$refs.tree;
                var arr= tree.getCheckedAndIndeterminateNodes();
                console.log(arr);
                for(var i=0;i<arr.length;i++){
                   params+="&perms="+arr[i].id;
                }
                console.log(params);
                axios.post(`${ctx}/jsp/rolegrant`,params)
                    .then(({data})=>{
                        iview.Message.success(data.msg);
                    });
            },
            changeSelection(selection){
                this.selection = selection;
            }
        },
        mounted(){
            this.search();
         }
    });
</script>